<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.min.js"></script>

    <!-- 引入element-ui -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>

    <!--bootStrap-->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!--axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <template>
            <el-table
                    :data="userData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        width="180">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button type="warning" @click="queryUserById(scope.row.id)" icon="el-icon-toilet-paper" circle></el-button>
                        <el-button type="danger" @click="deleteUser(scope.row.id)" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

    <div>
        <el-button type="primary" @click="add" icon="el-icon-thumb">添加</el-button>
    </div>

    <div>
        <el-dialog title="添加" :visible.sync="dialogAddFormVisible">
            <el-form :model="userFrom" :rules="rules" ref="userFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userFrom.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="userFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userFrom.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addUser('userFrom')">添加</el-button>
                    <el-button @click="dialogUpdateFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

    <div>
        <el-dialog title="修改" :visible.sync="dialogUpdateFormVisible">
            <el-form :model="userUpdateFrom" :rules="rules" ref="userUpdateFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userUpdateFrom.name" name="name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="userUpdateFrom.age" name="age"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userUpdateFrom.email" name="email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateUser('userUpdateFrom')">修改</el-button>
                    <el-button @click="dialogUpdateFormVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            userData:[],
            userFrom:{},
            rules:{},
            userUpdateFrom:{},
            dialogAddFormVisible:false,
            dialogUpdateFormVisible:false,
        },
        methods: {
            //查询所有用户
            queryUsers() {
                axios.get('/user/query')
                    .then(function (response) {
                    console.log(response.data);
                    app.userData = response.data;
                })
            },
            //新增用户
            add(){
                this.dialogAddFormVisible = true;
            },
            addUser(user) {
                axios.post('/user/insert', {
                    name:app.userFrom.name,
                    age:app.userFrom.age,
                    email:app.userFrom.email
                })
                    .then(function (response) {
                    console.log(response.data);
                })
                this.dialogAddFormVisible = false;
                history.go(0);
            },
            // 靠id查寻
            queryUserById(id) {
                this.dialogUpdateFormVisible = true;
                axios.get('/user/queryById', {
                    params: {
                        id: id
                    }
                }).then(function (response) {
                    app.userUpdateFrom = response.data;
                })
            },
            //更新用户
            updateUser() {
                axios.post('/user/update',{
                    id:app.userUpdateFrom.id,
                    name:app.userUpdateFrom.name,
                    age:app.userUpdateFrom.age,
                    email:app.userUpdateFrom.email
                })
                    .then(function (response) {
                    console.log(response.data);
                })
                this.dialogUpdateFormVisible = false;
                history.go(0);
            },
            // 删除用户
            deleteUser(id) {
                axios.get('/user/delete', {
                    params: {
                        id: id
                    }
                }).then(function (response) {
                    console.log(response.data);
                })
                history.go(0);
            },
        },
        created() {
            this.queryUsers();
        }
    })
</script>
</html>